import './App.css';
// react-router-dom  react的路由插件
import React from 'react'
import { Link, NavLink, Route, Routes } from 'react-router-dom'
import Home from '../../views/home/home';
import About from '../../views/about/about';


function App() {
  return (
    <div>
      <h1>第一个路由页面</h1>
      {/* 导航 */}
      <ul>
        <li>
          {/* 引用路由组件 */}
          <Link to="/home">home</Link>
        </li>
        <li>
          {/*NavLink 类似 <NavLink>是<Link>的一个特定版本*/}
          <NavLink to="/about">about</NavLink>
        </li>
      </ul>
      {/* 定义路由组件 */}
      <Route path="/home" component={Home}></Route>
      <Route path="/about" component={About}></Route>
    </div>

  );
}


export default App;
/* 
react-router-dom
react-router  @4
react-router-dom @5
react-router-dom @6  

安装 npm i -S react-router-dom 
第一步；编写路由组件 pages或者views
第二步：父组件中注册 使用

BrowserRouter as Router  命名了别名 别名是Router 底层使用的是history.pushState()   路径上没有#
HashRouter as Router   hash值改变切换页面的，页面的路径上有#

BrowserRouter或者HashRouter包裹到App的最外层,一个页面只能用一次

Link组件相当于导航链接（a标签）
to 浏览器地址栏上的pathname 可以通过location.pathname获取该值
NavLink 类似 <NavLink>是<Link>的一个特定版本

Routes里面是放Route组件

*/